<template>
  <div class="goods-tabs bg-white">
    <div class="tabs justify-between items-center sticky bg-white">
      <div
        class="item flex-col justify-center"
        :class="{ select: currentTab === index }"
        v-for="(tab, index) in tabs"
        :key="`tab${index}`"
        @tap="changeTab(index)"
      >
        <span>{{ tab }}</span>
      </div>
    </div>

    <div
      class="taro_html"
      v-if="currentTab === 0"
      v-html="data.goodsDetails"
    ></div>
    <div
      class="taro_html"
      v-if="currentTab === 1"
      v-html="data.rentInstructions"
    ></div>

    <QA v-if="currentTab === 2" />

    <GoodsComment v-show="currentTab === 3" />
    <div class="tips flex-col">
      <p class="title">温馨提示</p>
      <div class="content">
        点击“免押租”按钮后即默认您已阅读和接受上述产品页面信息，且
        回意授权平台将您的个人信息用于租赁交易的风险评估。
      </div>
    </div>
  </div>
</template>
<script>
import QA from "./qa";
import GoodsComment from "./goodsComment";
export default {
  components: { QA, GoodsComment },
  props: {
    goodsDetails: {
      type: String,
      default: () => {},
    },
    tabsData: {
      type: Object,
      default: {
        goodsDetails: "",
        rentInstructions: "",
      },
    },
  },
  data() {
    return {
      tabs: ["商品介绍", "租赁说明", "问题解答", "宝贝评论"],
      currentTab: 0,
    };
  },
  onLoad() {},
  mounted() {
    console.log(this.data, "datassss");
    // 给所有 img 标签设置mode
    // this.$taro.options.html.transformElement = (el) => {
    //   if (el.nodeName === 'image') {
    //     el.setAttribute('mode', 'widthFix')
    //   }
    //   return el
    // }
    // this.$taro.options.html.transformText = (el, text) => {
    //   console.log(el, text)
    //   if (el._value === '&nbsp;'){
    //     el._value = ' '
    //   }
    //   return el
    // }
  },
  methods: {
    changeTab(index) {
      this.currentTab = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-tabs {
  padding: 0 10px;
  width: 100%;
  margin-top: 8px;
  .tabs {
    height: 57px;
    // border-bottom: 1px solid #37A9FF;
    z-index: 100;
    padding: 0 10px;
    width: 100%;
    .item {
      font-size: 16px;
      color: #333333;
      position: relative;
      transition: color 0.3s;
      height: 28px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      border-radius: 14px;
      width: 76px;
      &.select {
        background-color: #0096ff;
        color: #ffffff;
      }
      // .line {
      //   position: absolute;
      //   left: 0;
      //   bottom: 0;
      //   width: 100%;
      //   height: 4px;
      //   background: #37A9FF;
      //   border-radius: 2px;
      // }
    }
  }
  .taro_html {
    image {
      width: 100%;
      // height: auto;
    }
  }
  .tips {
    height: 94px;
    margin-top: 12px;
    padding-bottom: 12px;
    margin-left: 14px;
    margin-bottom: 10px;
    .title {
      color: #ff5846;
      font-size: 14px;
    }
    .content {
      color: #555555;
      font-size: 12px;
      margin-top: 6px;
      line-height: 18px;
    }
  }
}
</style>
